<script>
import debounce from 'lodash.debounce'
export default {
  props: {
    showIndex: { type: Boolean, default: true },
    showPagination: { type: Boolean, default: true },
    autoHeight: { type: Boolean, default: false },
    query: {
      type: Object,
      required: false
    },
    pageSize: { type: Number, default: 15 },
    paginationConfig: {
      type: Object,
      default() {
        return {}
      }
    },
    tableConfig: {
      type: Object,
      default() {
        return {}
      }
    },
    tableEvents: { type: Object },
    loadData: { type: Function, required: false },
    propData: { type: Array }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableSize: this.pageSize,
      page: 1,
      total: 0
    }
  },
  render(h) {
    var self = this
    const props = { data: self.tableData, height: '100%', ...self.tableConfig }
    if (self.autoHeight) delete props.height
    const wrapperClass = ['table-wrapper']
    if (self.showPagination) wrapperClass.push('has-pagination')
    if (!self.autoHeight) wrapperClass.push('full-height')
    return h('div', { class: wrapperClass.join(' ') }, [
      h(
        'el-table',
        {
          props: props,
          directives: [
            {
              name: 'loading',
              value: self.loading
            }
          ],
          ref: 'table',
          on: self.tableEvents
        },
        [
          self.showIndex
            ? h('el-table-column', {
                props: {
                  type: 'index',
                  index: (index) => {
                    return (self.page - 1) * self.tableSize + (index + 1)
                  },
                  label: '序号',
                  width: '55',
                  align: 'center'
                }
              })
            : '',
          self.$scopedSlots.default()
        ]
        // self.tableRender(h)
      ),
      self.showPagination ?
      h('div', { class: 'table-pagination' }, [
        h('el-pagination', {
          class: 'float-right',
          props: {
            total: self.total,
            pageSize: self.tableSize,
            currentPage: self.page,
            layout: 'sizes, prev, pager, next, jumper',
            background: true,
            pageSizes: [15, 20],
            small: false,
            pagerCount: 5,
            ...self.paginationConfig
          },
          on: {
            'update:pageSize': function (val) {
              self.loading = true
              self.tableSize = val
            },
            'update:currentPage': function (val) {
              self.loading = true
              self.page = val
            }
          }
        })
      ]) : ''
    ])
  },
  watch: {
    page() {
      this.getDataDebounce()
    },
    tableSize() {
      this.getDataDebounce()
    },
    loadData() {
      this.requestData()
    },
    propData: {
      handler: function(arr) {
        this.tableData = arr
      },
      immediate: true
    }
  },

  methods: {
    getData() {
      if (this.page == 1) {
        this.requestData()
      } else {
        this.page = 1
      }
    },
    requestData() {
      this.loading = true
      this.loadData({
        page: this.page,
        pageSize: this.tableSize,
        query: this.query
      })
        .then(({ data }) => {
          this.tableData = data.data
          this.total = data.total
          this.$emit('total', this.total)
        })
        .catch(()=>{})
        .finally(() => {
          this.$nextTick(() => {
            this.$refs.table && (this.$refs.table.bodyWrapper.scrollTop = 0)
          })
          this.loading = false
        })
    },
    getDataDebounce: debounce(function () {
      this.requestData()
    }, 500)
  }
}
</script>
<style lang="scss">
.table-wrapper {
  background-color: #fff;
  position: relative;
  &.has-pagination {
    padding-bottom: 50px;
  }
  .table-pagination {
    // line-height:60px;
    height: 50px;
    padding: 10px 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
